<template>
	<view class="wshing" :style="{backgroundImage: 'url(' + bimg + ')'}">
		<!-- 头部 -->
		<view class="header">
			<view class="">
				<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Black"></uni-icons>
			</view>
			<view class="">
				<!-- 还愿池 -->
				他说
			</view>
			<view class=""></view>
		</view>
		<!-- 还愿标签 -->
		<view class="center">
			<view class="" style="width: 25%;" v-for="(item,index) in list" :key="index">
				<image :src="item.isimg ? item.img : item.img2" :class="item.class" @tap="ImgClick(item.id,index)">
				</image>
			</view>
		</view>
		<view class="">
			<lff-barrage ref="lffBarrage" :newlistData='Datalist' :islff="islff"></lff-barrage>
			<view class="nvat">
				<image :src="zximg" class="zixun" @click="Consulting"></image>
			</view>
		</view>
		<view class="box" v-if="istxt">
			<Wschildren @clear="clear"></Wschildren>
		</view>
		<view class="footer">
			<view class="footer_btn" @click="whrite" v-if="istxt == false">
				我要还愿
			</view>
			<view class="footer_btn" v-else @click="whritesucess">
				还愿
			</view>
		</view>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage1/lff-barrage1.vue'
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl'
	import {
		busTreviRivershow,
		busTreviFountainshow,
		busTreviFountainwishShow,
		busTreviFountainwish

	} from '../../../utils/api.js'
	import Wschildren from './components/wschildren2.vue'

	// import textares from './components/textares.vue'
	export default {
		components: {
			lffBarrage,
			Wschildren
		},
		data() {
			return {
				bimg: imgBaseUrl + '/img/wshing/beijing.png',
				islff: false,
				wshchildren: true, //许愿池子组件
				ywimg: imgBaseUrl + '/img/missimg/yuanwang.png',
				
				zximg: imgBaseUrl + '/img/wshing/anniu.png',
				list: [{
					id: '001',
					isimg: 'true',
					img: imgBaseUrl + '//img/wshing/qiujiankang.png',
					img2: imgBaseUrl + '//img/wshing/jiankang2.png',
					class: 'img1'
				}, {
					id: '002',
					isimg: 'true',
					img: imgBaseUrl + '//img/wshing/yinyuan2.png',
					img2: imgBaseUrl + '//img/wshing/yinyuan.png',
					class: 'img2'
				}, {
					id: '003',
					isimg: 'true',
					img: imgBaseUrl + '//img/wshing/shiye.png',
					img2: imgBaseUrl + '//img/wshing/shiye2.png',
					class: 'img3'
				}, {
					id: '004',
					isimg: 'true',
					img: imgBaseUrl + '//img/wshing/caiyun.png',
					img2: imgBaseUrl + '//img/wshing/caiyun2.png',
					class: 'img4'
				}],
				Datalist: [],
				xyid: '', //许愿图片得id
				status: '',
				istxt: false,
				isidex: '' //记录选择的下标
			}
		},
		onLoad(value) {
			console.log(value, 'value');
			this.status = value.status
		},
		  mounted() {
			this.Data()
			setTimeout(() => {
				this.colrdo()
			}, 1500)
		},
		methods: {
			async Data() {
				const res = await busTreviFountainwishShow()
				this.islff = false
				this.Datalist = res.result
			},
			colrdo() { //插入一条弹幕
				this.$refs.lffBarrage.newadd()
			},
			ImgClick(id, index) {
				this.wishType = id
				this.isidex = index
				if (index == 0) {
					this.list['1'].isimg = true
					this.list['2'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 1) {
					this.list['0'].isimg = true
					this.list['2'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 2) {
					this.list['0'].isimg = true
					this.list['1'].isimg = true
					this.list['3'].isimg = true
				} else if (index == 3) {
					this.list['0'].isimg = true
					this.list['1'].isimg = true
					this.list['2'].isimg = true
				}
				this.list[index].isimg = !this.list[index].isimg
				this.xyid = id
				if(this.list[index].isimg == false)
				{
					this.xyid = id
				}else
				{
					this.xyid = ''
				}
			},
			//跳转到还愿池
			redeem() {
				setTimeout(() => {
					this.islff = true
					this.Data();
					this.colrdo();
				}, 100)

			},
			//咨询专家
			Consulting() {
				const index = '3'
				uni.reLaunch({
					url: `../../../pages/tabbar/online/online?id=${index}`
				})
			},
			//许愿
			async whrite() {
				if (this.xyid == '') {
					uni.showToast({
						title: '请选择还愿类型',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 1000
					})
				} else {
					// 通过istxt判断切换按钮
					this.istxt = true
					this.$nextTick(() => {
						setTimeout(() => {
							console.log(this.$children[2].list, 'this');
							if (this.$children[2].arr.length == 0) {
								uni.showToast({
									title: '暂无还愿数据',
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'error',
									//显示持续时间为 2秒
									duration: 1000
								})
								this.istxt = false
							}
						},1000)
					})

				}
			},
			async whritesucess() {
				this.$nextTick(() => {

					setTimeout(async () => {
						console.log(this.$children[2].ids, 'this.$children[2].ids');

						
						if (this.$children[2].ids == '') {
							uni.showToast({
								title: '请选择还愿数据',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 1000
							})
						} else {
							uni.showLoading({
								title: '正在还愿中',
								success:async()=>{
									console.log(this.$children[2].ids,'ids');
									const result = await busTreviFountainwish(this.$children[2].ids)
									
									if (result.code == 200) {
										uni.hideLoading();
										uni.showToast({
											title: '还愿成功',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'success',
											//显示持续时间为 2秒
											duration: 1000
										})
										this.xyid = ''
										this.istxt = false
										this.$children[2].ids = ''
										this.list[this.isidex].isimg = true
										this.Data()
										setTimeout(() => {
											this.colrdo()
										}, 1500)
									}
								}
							})
							
						}

					}, 0)

				})
			},
			//返回
			Black() {
				this.Datalist = []
				uni.navigateBack(-1)
			},
			clear(){
				console.log(111,'clear');
					this.istxt = false
			}
		},
	}
</script>

<style lang="less" scoped>
	.wshing {
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 100vh;
		filter: brightness(100%);

		.header {
			display: flex;
			justify-content: space-between;
			padding: 104rpx 85rpx 0rpx 20rpx;
			color: white;
			position: relative;
			z-index: 99999999999;
		}

		.center {
		// position: relative;
		// z-index: 99999999;
			display: flex;
			width: 100%;
			height: 775rpx;


			.img1 {
				width: 213rpx;
				height: 40vh;
				// margin-left: 19rpx;
				// margin-top: 19rpx;
			}

			.img2 {
				width: 213rpx;
				height: 40vh;
				// margin-left: 25rpx;
				// margin-top: 95rpx;
			}

			.img3 {
				width: 213rpx;
				height: 40vh;
				// margin-left: 38rpx;
				// margin-top: -13rpx;
			}

			.img4 {
				width: 213rpx;
				height: 40vh;
				// margin-left: 22rpx;
				// margin-top: 17rpx;
			}
		}

		.nvat {
			.zixun {
				width: 241rpx;
				height: 279rpx;
				position: absolute;
				right: 0;
				bottom: 183rpx;
				z-index: 10000;
			}
		}

		.box {
			width: 100vw;
			height: 100vh;
			position: absolute;
			left: 0%;
			top: 0%;
			z-index: 10000;
			background-color: rgba(0, 0, 0, .5);
			.box_img {
				display: flex;
				justify-content: center;
				padding-bottom: 55rpx;

				.box_img_img {
					width: 500rpx;
					height: 66rpx;
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			.footer_btn {
				width: 356rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				background: linear-gradient(180deg, #FFEACC 0%, #FFD698 100%);
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				opacity: 1;
				position: absolute;
				bottom: 63rpx;
				z-index: 10000;
			}
		}


	}
</style>